import { Component, OnInit } from '@angular/core';

// 导入响应式表单的组件
import { FormGroup, FormControl, Validator, Validators } from '@angular/forms';
import { timestamp } from 'rxjs/operators';

// 导入自定义校验
import { forbiddenNameValidator } from '../forbiddenName';

@Component({
  selector: 'app-hello-form',
  templateUrl: './hello-form.component.html',
  styleUrls: ['./hello-form.component.scss']
})
export class HelloFormComponent implements OnInit {

  user = {
    name: ''
  }

  myGroup = {};

  constructor() { }

  ngOnInit() {
    // 初始化组件时
    this.myGroup = new FormGroup({
      // 内存对象与DOM对象的绑定关系
      'name': new FormControl(this.user.name, [
        Validators.required,
        Validators.minLength(4),
        // 添加自定义校验,不能以Tim开头
        forbiddenNameValidator(/^Tim/)
      ])
    })
  }

  get name() {
    return this.myGroup.get('name');
  }

  onSubmit() {
    console.log('提交表单');
    console.log(this.myGroup.valid);
    console.log(this.myGroup.value);
  }
}
